@charset "UTF-8";
/**
 * main.scss 项目总样式文件
 * @author Kayo
 * @date 2014-10-31
 *
 */
/**
 * var.scss 变量
 * @author Kayo&Clearwu
 * @date 2015-08-17
 *
 * --- common ----
 * #common 通用
 *
 * --- component ----
 * #button 按钮组件
 * #dialog 对话框组件
 * #mask 遮罩层组件
 * #dropdownMenu 下拉菜单组件
 * #tab 选项卡组件
 * #inputText、#textarea 文本输入组件
 *
 * --- project ---
 * #frame 外层框架
 * #others 其它组件
 * #column 栏目，用于展示组件及其介绍
 * #index 首页
 */
/**
 * Tencent is pleased to support the open source community by making QMUI Web available.
 * Copyright (C) 2019 THL A29 Limited, a Tencent company. All rights reserved.
 * Licensed under the MIT License (the "License"); you may not use this file except in compliance
 * with the License. You may obtain a copy of the License at
 *
 * http://opensource.org/licenses/MIT
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License is
 * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
 * either express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
 * _qmui.scss QMUI 总样式文件
 * @author Kayo
 * @date 2014-10-31
 *
 */
/**
 * _mixin.scss
 * @author Kayo
 * @date 2014-10-31
 *
 */
/**
 * _tool.scss 常用工具方法
 * @author Kayo
 * @date 2015-08-23
 *
 */
.dm_treeMenu .dm_treeMenu_item.dm_treeMenu_item_Unfolded:before, .dm_treeMenu .dm_treeMenu_item:before {
    display: block;
    content: " ";
    width: 0;
    line-height: 0;
    font-size: 0;
    border-style: solid;
    border-color: transparent;
}

/**
 * _reset.scss
 * @author Kayo
 * @date 2014-10-30
 *
 * #reset
 * #html5
 */
/* #reset */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, legend {
    margin: 0;
}

ul, ol, fieldset {
    margin: 0;
    padding: 0;
}

th, td {
    padding: 0;
}

table {
    font-size: inherit;
}

fieldset, img {
    border: 0;
}

ul, ol, li {
    list-style: none;
}

body {
    font-size: 14px;
    line-height: 1.5;
    background: #FFF;
    color: #474860;
}

h1, h2, h3, h4 {
    font-size: 18px;
    font-weight: normal;
}

body, input, textarea, select, button {
    font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", sans-serif;
    outline: none;
    -webkit-text-size-adjust: none;
}

input, textarea, select, button {
    font-size: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    color: #00A3E1;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(105, 186, 255, 0.13);
}

:focus {
    outline: none;
}

/* #html5 HTML5 元素的支持 */
article, aside, details,
figcaption, figure,
footer, header, hgroup,
main, nav, section,
summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

/**
 * _function.scss
 * @author Kayo
 * @date 2014-11-17
 */
.qui_txtNormal {
    font-weight: normal !important;
}

.qui_txtBold {
    font-weight: bold !important;
}

.qui_txtLeft {
    text-align: left !important;
}

.qui_txtRight {
    text-align: right !important;
}

.qui_txtUnderline {
    text-decoration: underline !important;
}

.qui_txtUnderlineNone {
    text-decoration: none !important;
}

.qui_txtOverflow {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: normal;
}

.qui_clear:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}

.qui_txtNowrap {
    white-space: nowrap !important;
}

.qui_layoutLeft {
    float: left !important;
}

.qui_layoutRight {
    float: right !important;
}

.qui_displayNone {
    display: none !important;
}

/**
 * _base.scss 存放项目基础样式、项目用方法、项目用function
 * @author Kayo
 * @date 2015-08-18
 *
 * #common
 */
pre {
    margin: 0;
}

html {
    height: 100%;
}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

a:hover {
    text-decoration: underline;
}

.index_banner_startBtn,
.index_banner_githubBtn,
.index_banner_updateBtn, .index_downloadBtn, .frame_nav_item {
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/**
 * _3rd.scss 业务公共组件
 * @author Kayo
 * @date 2015-08-17
 *
 */
/* 雪碧图 */
.dm_icon{
    display: inline-block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}
.dm_icon_BannerLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: 0 0;
    width: 160px;
    height: 160px;
}
.dm_icon_BannerMobileLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px -170px;
    width: 80px;
    height: 80px;
}
.dm_icon_BottomLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: 0 -340px;
    width: 72px;
    height: 72px;
}
.dm_icon_CloseMenu{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -430px -170px;
    width: 24px;
    height: 24px;
}
.dm_icon_Component{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -170px 0;
    width: 160px;
    height: 160px;
}
.dm_icon_Extension{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: 0 -170px;
    width: 160px;
    height: 160px;
}
.dm_icon_Menu{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -464px -170px;
    width: 24px;
    height: 24px;
}
.dm_icon_QQMailLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px -260px;
    width: 104px;
    height: 32px;
}
.dm_icon_Sass{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -170px -170px;
    width: 160px;
    height: 160px;
}
.dm_icon_TopLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px -302px;
    width: 96px;
    height: 20px;
}
.dm_icon_TreeMenuThumb{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -430px -204px;
    width: 14px;
    height: 14px;
}
.dm_icon_WeReadLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -82px -340px;
    width: 104px;
    height: 32px;
}
.dm_icon_WeWorkLogo{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -196px -340px;
    width: 104px;
    height: 32px;
}
.dm_icon_Workflow{
    background-image: url(../images/icons.7fc7e2bab2.png);
    background-position: -340px 0;
    width: 160px;
    height: 160px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi){
    .dm_icon_BannerLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: 0 0;
        background-size: 500px 412px;
    }
    .dm_icon_BannerMobileLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_BottomLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: 0 -340px;
        background-size: 500px 412px;
    }
    .dm_icon_CloseMenu{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -430px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Component{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -170px 0;
        background-size: 500px 412px;
    }
    .dm_icon_Extension{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: 0 -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Menu{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -464px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_QQMailLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px -260px;
        background-size: 500px 412px;
    }
    .dm_icon_Sass{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -170px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_TopLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px -302px;
        background-size: 500px 412px;
    }
    .dm_icon_TreeMenuThumb{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -430px -204px;
        background-size: 500px 412px;
    }
    .dm_icon_WeReadLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -82px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_WeWorkLogo{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -196px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_Workflow{
        background-image: url(../images/icons_2x.b54790f3c7.png);
        background-position: -340px 0;
        background-size: 500px 412px;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-resolution: 3dppx){
    .dm_icon_BannerLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: 0 0;
        background-size: 500px 412px;
    }
    .dm_icon_BannerMobileLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_BottomLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: 0 -340px;
        background-size: 500px 412px;
    }
    .dm_icon_CloseMenu{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -430px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Component{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -170px 0;
        background-size: 500px 412px;
    }
    .dm_icon_Extension{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: 0 -170px;
        background-size: 500px 412px;
    }
    .dm_icon_Menu{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -464px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_QQMailLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px -260px;
        background-size: 500px 412px;
    }
    .dm_icon_Sass{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -170px -170px;
        background-size: 500px 412px;
    }
    .dm_icon_TopLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px -302px;
        background-size: 500px 412px;
    }
    .dm_icon_TreeMenuThumb{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -430px -204px;
        background-size: 500px 412px;
    }
    .dm_icon_WeReadLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -82px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_WeWorkLogo{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -196px -340px;
        background-size: 500px 412px;
    }
    .dm_icon_Workflow{
        background-image: url(../images/icons_3x.7a6b0c4755.png);
        background-position: -340px 0;
        background-size: 500px 412px;
    }
}
/* 按钮 */
/**
 * _button.scss 按钮组件
 * @author Kayo
 * @date 2015-08-17
 *
 * .dm_btn
 *  + .dm_btn_Ghost
 *
 */
.dm_btn {
    display: inline-block;
    margin: 0;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    min-width: 46px;
    height: 30px;
    padding: 0 12px;
    background: #04C9E8;
    border: 1px solid transparent;
    line-height: 32px;
    line-height: 31px \9 \0 ;
    outline: none;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    color: #FFF;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border-radius: 2px;
}
.dm_btn:hover {
    background-color: #05D7F7;
}
.dm_btn:active, .dm_btn_Active {
    background-color: #04B1CC;
}
.dm_btn[Disabled] {
    opacity: 0.5;
}

a.dm_btn {
    text-decoration: none;
}
a.dm_btn:hover {
    text-decoration: none;
}

.dm_btn_Ghost {
    background-color: transparent;
    border: 1px solid #04C9E8;
    color: #04C9E8;
}
.dm_btn_Ghost:hover {
    background-color: transparent;
    border-color: #05D7F7;
    color: #05D7F7;
}
.dm_btn_Ghost:active, .dm_btn_Ghost a, .dm_btn_Ghost_Active {
    background-color: transparent;
    border-color: #04B1CC;
    color: #04B1CC;
}

/* 对话框 */
/**
 * _dialog.scss 对话框组件
 * @author Kayo
 * @date 2015-08-17
 *
 * .dm_dialog
 * > .dm_dialog_head 对话框的头部
 *   > .dm_dialog_title 对话框的标题
 *   > [.dm_dialog_close] 可选。对话框的关闭按钮
 * > .dm_dialog_cnt 对话框的内容区域
 * > [.dm_dialog_foot] 可选。对话框的底部
 */
.dm_dialog {
    position: absolute;
    z-index: 100;
    min-width: 420px;
    background: #FFF;
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.15);
}

.dm_dialog_head {
    padding: 0 12px;
    background: #00C0E1;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.dm_dialog_title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
}

.dm_dialog_close {
    position: absolute;
    top: 5px;
    right: 6px;
    padding: 5px;
    line-height: 1;
    font-size: 18px;
    color: #FFF;
}
.dm_dialog_close:hover {
    color: #D6D9DE;
    text-decoration: none;
}
.dm_dialog_close:active {
    color: #EAECEE;
}

.dm_dialog_body {
    padding: 23px 30px 30px 37px;
    background: #FFF;
    font-size: 14px;
    color: #353C46;
}

.dm_dialog_foot {
    padding: 17px 12px;
    background: #FFF;
    border-top: none;
    border-radius: 0 0 5px 5px;
    text-align: right;
    line-height: 25px;
}

.dm_dialog_foot .dm_btn {
    margin-left: 12px;
}

/* 遮罩层 */
/**
 * _mask.scss 遮罩层组件
 * @author Kayo
 * @date 2015-08-17
 *
 * .dm_maskWrap 遮罩层的包裹容器，包裹遮罩层以及需要弹出的内容（如对话框）
 * > .dm_mask
 */
.dm_maskWrap {
    position: relative;
    z-index: 90;
}

.dm_mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

/* 下拉菜单 */
/**
 * _dropdownMenu.scss 下拉菜单组件
 * @author Kayo
 * @date 2015-08-17
 *
 * .dm_dropdownMenu
 *
 */
.dm_dropdownMenu {
    position: absolute;
    z-index: 30;
    min-width: 206px;
    background: #FFF;
    border: 1px solid #DEE0E2;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.dm_dropdownMenu ul {
    padding: 12px 0;
}

.dm_dropdownMenu_itemLink {
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    color: #000;
}
.dm_dropdownMenu_itemLink:hover {
    background-color: #F5F5F5;
    text-decoration: none;
}
.dm_dropdownMenu_itemLink:active {
    background-color: #EBEBEB;
}

.dm_dropdownMenu_split {
    display: block;
    height: 0;
    line-height: 0;
    font-size: 0;
    margin: 5px 0;
    border-top: 1px solid #ccc;
}

/* 选项卡 */
/**
 * _tab.scss 选项卡组件
 * @author Kayo
 * @date 2015-08-17
 *
 * .dm_tab
 * > .dm_tab_title
 *   > .dm_tabNav
 *     > .dm_tabNav_item
 *       > .dm_tabNav_itemLink
 * > .dm_tab_cnt
 *
 */
.dm_tab {
    background: #FFF;
    border: 1px solid #DEE0E2;
}

.dm_tab_title {
    background: #FFF;
}

.dm_tabNav {
    padding: 0 16px;
    border-bottom: 1px solid #DEE0E2;
}
.dm_tabNav:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}

.dm_tabNav_item {
    float: left;
    margin: 0 24px -1px 0;
    border-bottom: 3px solid transparent;
    font-size: 16px;
}
.dm_tabNav_item_Curr {
    border-color: #04C9E8;
}
.dm_tabNav_item_Curr .dm_tabNav_itemLink {
    color: #04C9E8;
}

.dm_tabNav_itemLink {
    display: block;
    height: 43px;
    line-height: 43px;
    padding: 0;
    background: transparent;
    color: #858C96;
}
.dm_tabNav_itemLink:hover {
    color: #04C9E8;
    text-decoration: none;
}

.dm_tab_cnt {
    min-height: 100px;
    padding: 16px 24px;
}

/* 文本输入 */
/**
 * _textField.scss 文本输入组件
 * @author Kayo
 * @date 2015-08-17
 *
 * .dm_inputText
 * .dm_textarea
 *
 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ADB4BE;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: #ADB4BE;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #ADB4BE;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
    color: #ADB4BE;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #ADB4BE;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: #ADB4BE;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ADB4BE;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: #ADB4BE;
}

.dm_textarea, .dm_inputText {
    display: block;
    width: 270px;
    line-height: 22px;
    padding: 12px 16px;
    background: #FFF;
    border: 1px solid #DEE0E2;
    border-radius: 5px;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}

.dm_inputText,
.dm_textarea {
    font-size: 15px;
    color: #353C46;
}

.dm_inputText {
    height: 22px;
}
.dm_inputText::-ms-clear {
    display: none;
}

.dm_textarea {
    height: 66px;
}

/* 第三方插件相关样式 */
/**
 * _3rd.scss 第三方插件的相关样式
 * @author Kayo
 * @date 2015-08-17
 *
 * #hljs 代码高亮配色
 */
.hljs {
    display: block;
    padding: 0;
    background: transparent;
    overflow-x: auto;
    font-size: 14px;
}

.hljs, .hljs-subst {
    color: #444;
}

.hljs-comment {
    color: #888888;
}

.hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-keyword, .hljs-doctag, .hljs-name {
    font-weight: bold;
}

.hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion {
    color: #c10303;
}

.hljs-title, .hljs-section {
    color: #880000;
    font-weight: bold;
}

.hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo {
    color: #BC6060;
}

.hljs-literal {
    color: #78A960;
}

.hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition {
    color: #5cb900;
}

.hljs-meta {
    color: #1f7199;
}

.hljs-meta-string {
    color: #4d99bf;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

/* 栏目，用于展示组件及介绍组件 */
/**
 * _column.scss 栏目，用于展示组件及其介绍
 * @author Kayo
 * @date 2015-08-18
 *
 * .dm_column
 * > .dm_column_title 栏目标题（大组件的标题）
 * > [.dm_column_tip] 提示语，可以用在栏目这一层，也可以用在栏目项中
 * > [.dm_column_item] 栏目项（大组件下的各个小组件）
 *   > .dm_column_item_title 栏目项的标题（小组件的标题）
 *   > .[.dm_column_tip] 提示语
 *   > .[dm_column_item_info] 栏目项的信息
 *   + .dm_column_item_info_Single 栏目项中只包含代码展示没有效果展示的情况
 *     > [.dm_column_display] 栏目项的实际效果展示
 *       > .dm_column_display_title 栏目项展示的提示性标题
 *       > .dm_column_display_cnt 栏目项展示的具体内容
 *     > .dm_column_item_info_code 栏目项的中的组件的相关代码（高亮显示代码）
 *     > .dm_column_item_info_list 栏目项的中的列表的相关代码
 *
 * .dm_columnDisplayControl 给组件外部使用的类，用于展示代码时控制 absolute 元素 relative 并自适应宽度
 */
.dm_column {
    margin-bottom: 85px;
}

.dm_column_title {
    border-style: solid;
    border-color: #D4D6D8;
    border-width: 0 0 1px 0;
    border-radius: 0;
    border-style: solid;
    margin-bottom: 30px;
    padding-bottom: 10px;
    font-size: 38px;
    color: #333;
    font-weight: bold;
    text-transform: capitalize;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .dm_column_title {
        position: relative;
        border: 0;
    }
    .dm_column_title:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border-radius: 0;
        border-style: solid;
        border-color: #D4D6D8;
        border-width: 0 0 1px 0;
        border-style: solid;
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
        -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
                transform-origin: 0 0;
        pointer-events: none;
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 3dppx), (min-resolution: 288dpi) {
    .dm_column_title:after {
        width: 300%;
        height: 300%;
        border-radius: 0;
        -webkit-transform: scale(0.3333333333);
            -ms-transform: scale(0.3333333333);
                transform: scale(0.3333333333);
    }
}

.dm_column_tip {
    max-width: 840px;
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 1.5;
}
.dm_column_tip:last-child {
    margin-bottom: 0;
}

pre.dm_column_tip {
    overflow: auto;
}

.dm_column_tip ul li {
    list-style: disc inside;
}

.dm_column_tip ol li {
    margin-bottom: 5px;
    list-style: decimal inside;
}

.dm_column_tip img {
    max-width: 100%;
    vertical-align: top;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
}

.dm_column_item {
    margin-bottom: 30px;
}

.dm_column_item:last-of-type {
    margin-bottom: 0;
}

.dm_column_item_title {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.dm_column_item_subtitle {
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

.dm_column_item_info {
    border-style: solid;
    border-color: #e4dcc5;
    border-width: 1px;
    border-radius: 4px;
    border-style: solid;
    max-width: 840px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .dm_column_item_info {
        position: relative;
        border: 0;
    }
    .dm_column_item_info:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border-radius: 8px;
        border-style: solid;
        border-color: #e4dcc5;
        border-width: 1px;
        border-style: solid;
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
        -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
                transform-origin: 0 0;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        pointer-events: none;
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 3dppx), (min-resolution: 288dpi) {
    .dm_column_item_info:after {
        width: 300%;
        height: 300%;
        border-radius: 12px;
        -webkit-transform: scale(0.3333333333);
            -ms-transform: scale(0.3333333333);
                transform: scale(0.3333333333);
    }
}

.dm_column_item_info_Single {
    margin-bottom: 30px;
}

.dm_column_display {
    padding: 15px;
}

.dm_column_display_title {
    margin-bottom: 20px;
    color: #999;
    font-weight: bold;
}

.dm_column_display_cnt {
    overflow: auto;
}
.dm_column_display_cnt:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}
.dm_column_display_cnt .dm_inputText,
.dm_column_display_cnt .dm_textarea {
    margin-bottom: 10px;
}

.dm_column_item_info_code,
.dm_column_item_info_tips {
    border-style: solid;
    border-color: #e4dcc5;
    border-width: 1px 0 0 0;
    border-radius: 0;
    border-style: solid;
    padding: 15px;
    font-size: 14px;
    background-color: #FAF8F2;
    overflow: auto;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .dm_column_item_info_code,
    .dm_column_item_info_tips {
        position: relative;
        border: 0;
    }
    .dm_column_item_info_code:after,
    .dm_column_item_info_tips:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border-radius: 0;
        border-style: solid;
        border-color: #e4dcc5;
        border-width: 1px 0 0 0;
        border-style: solid;
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
        -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
                transform-origin: 0 0;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        pointer-events: none;
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 3dppx), (min-resolution: 288dpi) {
    .dm_column_item_info_code:after,
    .dm_column_item_info_tips:after {
        width: 300%;
        height: 300%;
        border-radius: 0;
        -webkit-transform: scale(0.3333333333);
            -ms-transform: scale(0.3333333333);
                transform: scale(0.3333333333);
    }
}

.dm_column_item_info_tips {
    background-color: #f3f8fc;
    margin-bottom: 15px;
    font-size: 12px;
    color: #707070;
}

.dm_column_item_info_Single .dm_column_item_info_code {
    border-style: solid;
    border-color: #DEE0E2;
    border-width: 0;
    border-radius: 0;
    border-style: solid;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .dm_column_item_info_Single .dm_column_item_info_code {
        position: relative;
        border: 0;
    }
    .dm_column_item_info_Single .dm_column_item_info_code:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border-radius: 0;
        border-style: solid;
        border-color: #DEE0E2;
        border-width: 0;
        border-style: solid;
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
        -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
                transform-origin: 0 0;
        pointer-events: none;
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 3dppx), (min-resolution: 288dpi) {
    .dm_column_item_info_Single .dm_column_item_info_code:after {
        width: 300%;
        height: 300%;
        border-radius: 0;
        -webkit-transform: scale(0.3333333333);
            -ms-transform: scale(0.3333333333);
                transform: scale(0.3333333333);
    }
}

.dm_column_item_info_list ul ul {
    margin-bottom: 20px;
}
.dm_column_item_info_list .dm_column_item_info_list_item {
    color: #787878;
    font-size: 18px;
}
.dm_column_item_info_list .dm_column_item_info_list_item_subitem {
    padding-left: 30px;
}

.dm_column_item_info_HasMarginTop {
    margin-top: 20px;
}

.dm_columnDisplayControl {
    position: relative !important;
    z-index: 10;
    float: left !important;
}

@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .dm_column {
        margin-bottom: 60px;
    }
    .dm_column_title {
        margin-bottom: 20px;
        padding-bottom: 5px;
        font-size: 34px;
    }
    .dm_column_item_title {
        margin-bottom: 10px;
        font-size: 22px;
    }
}
/* 扩展组件 */
/**
 * _others.scss
 * @author Hugh
 * @date 2015-08-27
 *
 */
.dm_verticalTab .dm_tab_title {
    float: left;
    width: 150px;
}
.dm_verticalTab .dm_tabNav_item {
    float: none;
}
.dm_verticalTab .dm_verticalTabNav_item_Curr {
    background-color: #ecf9ff;
}
.dm_verticalTab .dm_tab_cnt {
    overflow: hidden;
    zoom: 1;
}

.dm_dualCols1 {
    border: 1px solid #c9c9c9;
}
.dm_dualCols1 .dm_dualCols_left {
    display: table-cell;
    border-right: 1px solid #c9c9c9;
    padding: 10px;
}
.dm_dualCols1 .dm_dualCols_right {
    display: table-cell;
    padding: 10px;
}

.dm_dualCols2 {
    border: 1px solid #c9c9c9;
    overflow: hidden;
}
.dm_dualCols2 .dm_dualCols_left {
    border-right: 1px solid #c9c9c9;
    padding: 10px 10px 3000px;
    float: left;
    margin-bottom: -3000px;
}
.dm_dualCols2 .dm_dualCols_right {
    overflow: hidden;
    zoom: 1;
    padding: 10px;
}

.dm_fileUpload {
    position: relative;
    overflow: hidden;
}
.dm_fileUpload .dm_fileUpload_input {
    width: 100%;
    height: 200%;
    position: absolute;
    top: -100%;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.dm_treeMenu {
    position: relative;
}
.dm_treeMenu ul {
    padding-left: 30px;
}
.dm_treeMenu .dm_treeMenu_item {
    height: 30px;
    line-height: 30px;
}
.dm_treeMenu .dm_treeMenu_item:before {
    content: "";
    position: relative;
    z-index: 1;
    float: left;
    margin-top: 9px;
    margin-right: 5px;
    /* 向上小三角 */
    border-width: 5px 5px;
    border-right: 0;
    border-left-color: #787878;
}
.dm_treeMenu .dm_treeMenu_item.dm_treeMenu_item_Unfolded:before {
    margin-top: 12px;
    margin-left: -3px;
    /* 向上小三角 */
    border-width: 5px 5px;
    border-bottom: 0;
    border-top-color: #787878;
}
.dm_treeMenu .dm_treeMenu_item.dm_treeMenu_item_NoChild:before {
    content: none;
}
.dm_treeMenu .dm_treeMenu_item.dm_treeMenu_item_Checked:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    background-color: #DEE5E7;
    z-index: 0;
}
.dm_treeMenu .dm_treeMenu_item.dm_treeMenu_item_Checked span {
    position: relative;
    z-index: 1;
}

/**
 * _logic.scss 业务逻辑代码
 * @author Kayo
 * @date 2015-08-17
 *
 */
/**
 * _frame.scss 外层框架
 * @author Kayo
 * @date 2015-08-17
 *
 * #wrap 外层框架
 * #head 页头
 *   #title 网站标题
 *   #nav 网站导航
 * #sidebar 左侧栏
 *   #sidebar_nav 侧栏导航
 * #cnt 右侧主体
 * #media 小屏幕适配
 * #responsive 响应式
 *
 */
.frame_wrap {
    position: relative;
    min-height: 100%;
}

.frame_head {
    padding-left: 188px;
    background-color: #00A3E1;
}
.frame_head:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}
.frame_head .frame_head_showMenuBtn,
.frame_head .frame_head_closeMenuBtn {
    display: none;
}

.frame_head_title {
    float: left;
    margin-right: 28px;
    font-size: 18px;
    line-height: 0;
    vertical-align: top;
}

.frame_head_title_link {
    margin-top: 13px;
    line-height: 200;
    overflow: hidden;
}
.frame_head_title_link:hover {
    text-decoration: none;
}

.frame_nav {
    overflow: hidden;
    zoom: 1;
    -webkit-font-smoothing: antialiased;
}

.frame_nav_item {
    float: left;
    height: 46px;
    margin-right: 28px;
    line-height: 46px;
    color: #ABE0F5;
}
.frame_nav_item:hover {
    color: #FFF;
    text-decoration: none;
}

.frame_nav_item_Curr {
    color: #fff;
}

.frame_sidebar {
    position: absolute;
    top: 46px;
    bottom: 0;
    left: 0;
    width: 450px;
    background-color: #f7f7f7;
    overflow: auto;
}

.frame_sidebar_inner {
    float: right;
    width: 240px;
    padding: 43px 22px 50px 0;
}

.frame_sidebar_nav {
    font-size: 14px;
}

.frame_sidebar_nav_link {
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: normal;
    display: block;
    margin-bottom: 2px;
    padding: 7px 0 7px 20px;
    border-left: 2px solid transparent;
    line-height: 1;
    color: #858C96;
    text-decoration: none;
    text-transform: capitalize;
}
.frame_sidebar_nav_link:hover {
    padding-left: 21px;
    border-width: 1px;
    border-color: #00A3E1;
    color: #00A3E1;
    text-decoration: none;
}

.frame_sidebar_nav_Children {
    display: none;
    padding-bottom: 4px;
}
.frame_sidebar_nav_Children .frame_sidebar_nav_link {
    margin-bottom: 0;
    padding-left: 35px;
    line-height: 1;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: normal;
}
.frame_sidebar_nav_Children .frame_sidebar_nav_link:hover {
    padding-left: 36px;
}

.frame_sidebar_nav_Children .frame_sidebar_nav_item_Active .frame_sidebar_nav_link,
.frame_sidebar_nav_item_Open > .frame_sidebar_nav_link {
    margin-left: 0;
    border-width: 2px;
    border-color: #00A3E1;
    color: #00A3E1;
    font-weight: bold;
}

.frame_sidebar_nav_Children .frame_sidebar_nav_item_Active .frame_sidebar_nav_link {
    padding-left: 35px;
}

.frame_sidebar_nav_item_Open > .frame_sidebar_nav_link {
    padding-left: 20px;
}

.frame_sidebar_nav_item_Open .frame_sidebar_nav_Children {
    display: block;
}

.frame_sidebar_nav_Tool .frame_sidebar_nav_link {
    text-transform: none;
}

.frame_cnt {
    position: absolute;
    top: 46px;
    left: 450px;
    right: 0;
    bottom: 0;
    padding: 40px;
    overflow: auto;
}

@media screen and (max-width: 1366px) {
    .frame_head {
        padding-left: 98px;
    }
    .frame_sidebar {
        width: 320px;
    }
    .frame_sidebar_inner {
        width: 200px;
    }
    .frame_cnt {
        left: 320px;
    }
}
@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .frame_head {
        padding: 0 30px;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    .frame_head .frame_head_showMenuBtn,
    .frame_head .frame_head_closeMenuBtn {
        position: absolute;
        z-index: 90;
        line-height: 0;
        font-size: 0;
        padding: 7px;
    }
    .frame_head .frame_head_showMenuBtn {
        left: 9px;
        top: 6px;
        display: block;
    }
    .frame_head .frame_head_closeMenuBtn {
        left: 11px;
        top: 6px;
    }
    .frame_head_title {
        position: relative;
        z-index: 90;
        float: none;
        display: inline-block;
        margin-right: 0;
        font-size: 17px;
        -webkit-font-smoothing: antialiased;
    }
    .frame_head_title_link {
        margin-top: 14px;
    }
    .frame_nav {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 80;
        display: none;
        height: 100vh;
        width: 100%;
        padding: 74px 48px 24px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#00A3E1), to(#06DCE9));
        background-image: -o-linear-gradient(top, #00A3E1 0%, #06DCE9 100%);
        background-image: linear-gradient(to bottom, #00A3E1 0%, #06DCE9 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF00A3E1", endColorstr="#FF06DCE9", GradientType=0);
    }
    .frame_nav_item {
        float: none;
        display: block;
        height: auto;
        margin-right: 0;
        margin-bottom: 14px;
        padding-bottom: 20px;
        text-align: left;
        font-size: 17px;
        line-height: 1;
        color: #fff;
        border-style: solid;
        border-color: #fff;
        border-width: 0 0 1px 0;
        border-radius: 0;
        border-style: solid;
    }
}
@media handheld and (max-width: 846px) and (-webkit-min-device-pixel-ratio: 2), handheld and (max-width: 846px) and (min-device-pixel-ratio: 2), handheld and (max-width: 846px) and (-o-min-device-pixel-ratio: 2/1), handheld and (max-width: 846px) and (min-resolution: 2dppx), handheld and (max-width: 846px) and (min-resolution: 192dpi), screen and (max-width: 846px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 846px) and (min-device-pixel-ratio: 2), screen and (max-width: 846px) and (-o-min-device-pixel-ratio: 2/1), screen and (max-width: 846px) and (min-resolution: 2dppx), screen and (max-width: 846px) and (min-resolution: 192dpi) {
    .frame_nav_item {
        position: relative;
        border: 0;
    }
    .frame_nav_item:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border-radius: 0;
        border-style: solid;
        border-color: #fff;
        border-width: 0 0 1px 0;
        border-style: solid;
        -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
                transform: scale(0.5);
        -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
                transform-origin: 0 0;
        pointer-events: none;
    }
}
@media handheld and (max-width: 846px) and (-webkit-min-device-pixel-ratio: 3), handheld and (max-width: 846px) and (min-device-pixel-ratio: 3), handheld and (max-width: 846px) and (-o-min-device-pixel-ratio: 3/1), handheld and (max-width: 846px) and (min-resolution: 3dppx), handheld and (max-width: 846px) and (min-resolution: 288dpi), screen and (max-width: 846px) and (-webkit-min-device-pixel-ratio: 3), screen and (max-width: 846px) and (min-device-pixel-ratio: 3), screen and (max-width: 846px) and (-o-min-device-pixel-ratio: 3/1), screen and (max-width: 846px) and (min-resolution: 3dppx), screen and (max-width: 846px) and (min-resolution: 288dpi) {
    .frame_nav_item:after {
        width: 300%;
        height: 300%;
        border-radius: 0;
        -webkit-transform: scale(0.3333333333);
            -ms-transform: scale(0.3333333333);
                transform: scale(0.3333333333);
    }
}
@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .frame_head_ShowNav .frame_nav,
    .frame_head_ShowNav .frame_head_closeMenuBtn {
        display: block;
    }
    .frame_head_ShowNav .frame_head_showMenuBtn {
        display: none;
    }
}
@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .frame_sidebar {
        display: none;
    }
}
@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .frame_cnt {
        position: static;
        padding-left: 30px;
        padding-right: 30px;
    }
}
/**
 * _widget.scss 组件展示页面
 * @author Kayo
 * @date 2015-08-18
 *
 */
.widget_dialogInMask {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -74px 0 0 -221px;
    position: fixed;
}

/**
 * _index.scss 主页
 * @author Kayo
 * @date 2015-07-04
 *
 * #common 通用部分
 * #banner 头部大 Banner
 * #cnt 主体内容
 * #foot 页脚
 * #star Github Star 引导
 * #responsive 响应式
 */
.index_column {
    position: relative;
    margin-bottom: 58px;
}
.index_column:before {
    content: ".";
    position: absolute;
    bottom: 0;
    left: 283px;
    right: 283px;
    font-size: 0;
    border-top: 1px solid #D4D6D8;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .index_column:before {
        -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
                transform: scaleY(0.5);
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3), (-o-min-device-pixel-ratio: 3/1), (min-resolution: 3dppx), (min-resolution: 288dpi) {
    .index_column:before {
        -webkit-transform: scaleY(0.3333333333);
            -ms-transform: scaleY(0.3333333333);
                transform: scaleY(0.3333333333);
    }
}
.index_column:last-child {
    margin-bottom: 0;
}
.index_column:last-child:before {
    content: normal;
}

.index_column_title {
    margin-bottom: 22px;
    font-size: 34px;
}

.index_column_desc {
    color: #9595A3;
    font-size: 16px;
    line-height: 36px;
}

.index_column_mobileDesc {
    display: none;
    line-height: 28px;
    font-size: 16px;
    text-align: left;
}
.index_column_mobileDesc p {
    margin-top: 31px;
}
.index_column_mobileDesc p:first-child {
    margin-top: 0;
}

.index_downloadBtn {
    display: inline-block;
    min-width: 100px;
    margin-bottom: 20px;
    padding: 8px 32px;
    font-size: 17px;
    text-align: center;
    border: 1px solid #474860;
    border-radius: 6px;
    color: #4E4F66;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.index_downloadBtn:hover {
    text-decoration: none;
}
@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .index_downloadBtn {
        padding-left: 25px;
        padding-right: 25px;
    }
}
.index_downloadBtn:hover {
    border-color: #676884;
    background-color: #676884;
    color: #fff;
}
.index_downloadBtn:active {
    border-color: #474860;
    background-color: #474860;
}

.index_banner {
    padding: 75px 0 85px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#00A3E1), to(#06DCE9));
    background-image: -o-linear-gradient(top, #00A3E1 0%, #06DCE9 100%);
    background-image: linear-gradient(to bottom, #00A3E1 0%, #06DCE9 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF00A3E1", endColorstr="#FF06DCE9", GradientType=0);
    text-align: center;
    -webkit-font-smoothing: antialiased;
}
.index_banner .dm_icon {
    margin-bottom: 48px;
    vertical-align: top;
}
.index_banner .dm_icon_BannerMobileLogo {
    display: none;
}

.index_banner_desc {
    margin-bottom: 49px;
    color: #fff;
    font-size: 30px;
    line-height: 52px;
}

.index_banner_startBtn,
.index_banner_githubBtn,
.index_banner_updateBtn {
    display: inline-block;
    min-width: 100px;
    margin-bottom: 20px;
    padding: 8px 32px;
    font-size: 17px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 6px;
    color: #fff;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 166px;
    height: 45px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 44px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    vertical-align: top;
}
.index_banner_startBtn:hover,
.index_banner_githubBtn:hover,
.index_banner_updateBtn:hover {
    text-decoration: none;
}
@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .index_banner_startBtn,
    .index_banner_githubBtn,
    .index_banner_updateBtn {
        padding-left: 25px;
        padding-right: 25px;
    }
}
.index_banner_startBtn:hover,
.index_banner_githubBtn:hover,
.index_banner_updateBtn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.index_banner_startBtn:active,
.index_banner_githubBtn:active,
.index_banner_updateBtn:active {
    background-color: #fff;
    color: #04DACD;
}

.index_banner_startBtn {
    margin-left: 15px;
}

.index_banner_githubBtn {
    font-size: 20px;
}

.index_banner_updateBtn {
    width: 347px;
}

.index_banner_version {
    color: #fff;
    font-size: 14px;
}

.index_cnt {
    margin-bottom: 70px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.index_cnt_inside {
    width: 786px;
    margin: 0 auto;
    padding-top: 88px;
}

.index_cnt_purpose {
    padding-bottom: 58px;
}

.index_cnt_ability {
    padding-bottom: 42px;
}

.index_cnt_ability_list:after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}

.index_ability_item {
    float: left;
    width: 50%;
    margin-bottom: 40px;
    padding-right: 35px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.index_ability_item .dm_icon {
    margin-bottom: 10px;
}

.index_ability_item_title {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: bold;
    color: #555557;
}

.index_ability_item_cnt {
    color: #9595A3;
    font-size: 15px;
    line-height: 1.7;
}

.index_ability_item_Even {
    padding-right: 0;
    padding-left: 35px;
}

.index_appIntro {
    margin-bottom: 53px;
    padding-bottom: 50px;
}

.index_appIntro_desc {
    margin-bottom: 46px;
}

.index_appIntro_img {
    display: block;
    width: 440px;
    height: 640px;
    margin: 0 auto 80px;
    background: url("../images/independent/App.png") no-repeat;
    background-size: 100%;
    -webkit-box-shadow: 0 20px 30px 0 #CFDCE6;
            box-shadow: 0 20px 30px 0 #CFDCE6;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .index_appIntro_img {
        background-image: url("../images/independent/App_2x.png");
    }
}

@supports ((-webkit-filter: drop-shadow(0 20px 20px #cfdce6)) or (filter: drop-shadow(0 20px 20px #cfdce6))) {
    .index_appIntro_img {
        -webkit-box-shadow: none;
                box-shadow: none;
        -webkit-filter: drop-shadow(0 20px 20px #cfdce6);
                filter: drop-shadow(0 20px 20px #cfdce6);
    }
}
.index_project_desc {
    margin-bottom: 42px;
}

.index_project_list_item {
    margin-left: 44px;
    line-height: 0;
    vertical-align: top;
}
.index_project_list_item:first-child {
    margin-left: 0;
}

.index_foot {
    padding: 72px 0 75px;
    background-color: #f8f9fa;
    color: #9595A3;
    text-align: center;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
.index_foot .dm_icon {
    margin-bottom: 22px;
}

@media handheld and (max-width: 846px), screen and (max-width: 846px) {
    .index_banner {
        padding: 30px 30px 25px 30px;
    }
    .index_banner .dm_icon {
        margin-bottom: 21px;
    }
    .index_banner .dm_icon_BannerLogo {
        display: none;
    }
    .index_banner .dm_icon_BannerMobileLogo {
        display: inline-block;
    }
    .index_banner_desc {
        margin-bottom: 33px;
        font-size: 18px;
        line-height: 26px;
    }
    .index_banner_startBtn,
    .index_banner_githubBtn {
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 15px;
    }
    .index_banner_updateBtn {
        width: 342px;
    }
    .index_cnt {
        margin-bottom: 38px;
    }
    .index_cnt_inside {
        width: auto;
        padding-top: 40px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .index_column {
        margin-bottom: 50px;
    }
    .index_column:before {
        left: 50%;
        right: auto;
        width: 100px;
        margin-left: -50px;
    }
    .index_column_title {
        margin-bottom: 30px;
        font-size: 22px;
    }
    .index_column_desc {
        display: none;
    }
    .index_column_mobileDesc {
        display: block;
    }
    .index_appIntro_img {
        height: auto;
        width: 90%;
        padding-bottom: 130.9090909091%;
    }
    .index_appIntro_desc {
        margin-bottom: 30px;
    }
    .index_ability_item {
        float: none;
        width: auto;
        margin-bottom: 35px;
        padding-left: 0;
        padding-right: 0;
    }
    .index_ability_item_title {
        font-size: 16px;
    }
    .index_ability_item_cnt {
        font-size: 16px;
    }
    .index_appIntro_downloadDirect {
        display: none;
    }
    .index_project_desc {
        margin-bottom: 23px;
        font-size: 16px;
    }
    .index_project_list_item {
        display: block;
        margin: 16px auto 0;
    }
    .index_project_list_item:first-child {
        margin-top: 0;
        margin-left: auto;
    }
    .index_foot {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .index_foot .qw_icon {
        margin-bottom: 28px;
        vertical-align: top;
    }
}
@media handheld and (max-width: 402px), screen and (max-width: 402px) {
    .index_banner_updateBtn {
        width: 166px;
        font-size: 0;
    }
    .index_banner_updateBtn:before {
        content: "升级到 2.0";
        font-size: 17px;
    }
}
/**
 * _tool.scss 工具方法页面
 * @author Kayo
 * @date 2016-07-18
 *
 * #common 通用部分
 */
.tool_stage .dm_column_item_info_code {
    cursor: pointer;
}
.tool_stage .tool_stage_example .dm_column_item_info_code {
    cursor: default;
}

.tool_stage_item {
    margin-bottom: 36px;
    padding-left: 30px;
}
.tool_stage_item .dm_column_item_title {
    margin-left: -30px;
}
.tool_stage_item .dm_column_item_info_Single {
    margin-bottom: 0;
}

.tool_stage_item_desc {
    max-width: 840px;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.5;
}

.tool_stage_para,
.tool_stage_example {
    max-width: 840px;
    margin-top: 25px;
}

.tool_stage_para_title,
.tool_stage_example_title {
    margin-bottom: 12px;
    border-bottom: 1px solid #e4dcc5;
    padding-bottom: 4px;
    font-size: 16px;
}

.tool_stage_para_item {
    margin-top: 12px;
}
.tool_stage_para_item:first-child {
    margin-top: 0;
}

.tool_stage_item_para_data {
    margin-top: 4px;
}
.tool_stage_item_para_data:first-child {
    margin-top: 0;
}

.tool_stage_paraType,
.tool_stage_paraDefaultValue {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 10px;
    border-radius: 12px;
    border: 1px solid #00A3E1;
    color: #00A3E1;
    font-size: 12px;
}

.tool_stage_paraDefaultValue {
    margin-left: 4px;
    border-color: #d44950;
    color: #d44950;
}